function initMapChart(period) {
    const dom = document.getElementById('china-map');
    if (window.mapChart) {
        window.mapChart.dispose();
    }
    window.mapChart = echarts.init(dom);
    const mapData = dataConfig[period].mapData; // 从全局数据获取地图数据

    // 科技感色彩体系
    const techColors = {
        primary: '#6C63FF',
        secondary: '#00F0FF',
        accent: '#FF2E93',
        dark: 'transparent', // 透明背景（继承页面背景）
        border: 'rgba(108, 99, 255, 0.6)',
        glow: 'rgba(0, 240, 255, 0.4)'
    };

    // 流动线条数据
    const flowLinesData = [
        { from: '贵州', to: '四川', weight: 3 },
        { from: '贵州', to: '重庆', weight: 2 },
        { from: '贵州', to: '湖南', weight: 3 },
        { from: '贵州', to: '广西', weight: 2 },
        { from: '贵州', to: '云南', weight: 3 },
        { from: '贵州', to: '陕西', weight: 2 },
        { from: '贵州', to: '江苏', weight: 4 },
        { from: '贵州', to: '浙江', weight: 4 },
        { from: '贵州', to: '广东', weight: 4 },
        { from: '贵州', to: '河南', weight: 2 },
        { from: '贵州', to: '山东', weight: 2 },
        { from: '贵州', to: '北京', weight: 3 },
        { from: '贵州', to: '上海', weight: 3 },
        { from: '贵州', to: '湖北', weight: 2 }
    ];

    // 省份经纬度映射
    const provinceCoords = {
        '贵州': [106.63, 26.65],
        '四川': [104.06, 30.67],
        '重庆': [106.50, 29.53],
        '湖南': [111.87, 27.59],
        '广西': [108.33, 22.84],
        '云南': [102.71, 25.04],
        '陕西': [108.95, 34.27],
        '江苏': [119.78, 32.04],
        '浙江': [120.19, 30.26],
        '广东': [113.23, 23.16],
        '河南': [113.65, 34.76],
        '山东': [117.00, 36.65],
        '北京': [116.40, 39.90],
        '上海': [121.47, 31.23],
        '湖北': [114.31, 30.52]
    };

    // 处理线条坐标和权重
    const formattedLines = flowLinesData.map(line => ({
        ...line,
        coords: [
            provinceCoords[line.from],
            provinceCoords[line.to]
        ]
    }));

    // 粒子效果数据
    const particleData = [];
    formattedLines.forEach(line => {
        const particleCount = 3 + Math.floor(Math.random() * 3);
        for (let i = 0; i < particleCount; i++) {
            particleData.push({
                coords: line.coords,
                percent: Math.random(),
                lineIndex: particleData.length,
                weight: line.weight
            });
        }
    });

    const option = {
        backgroundColor: techColors.dark,
        tooltip: {
            trigger: 'item',
            textStyle: { fontSize: 14, color: '#fff' },
            formatter: params => {
                if (params.seriesType === 'lines') {
                    return `<div style="font-weight:600;color:${techColors.secondary}">数据传输链路</div>
                            <div>贵州 → ${params.data.to}</div>
                            <div>强度: ${'▉'.repeat(params.data.weight)}</div>`;
                }
                return `<div style="font-weight:600;color:${techColors.secondary}">${params.name}</div>
                        <div>活动场次: ${params.value} 场</div>`;
            },
            backgroundColor: 'rgba(15, 23, 54, 0.9)',
            borderColor: techColors.primary,
            borderWidth: 1,
            padding: 12,
            borderRadius: 6,
            boxShadow: `0 0 15px ${techColors.glow}`
        },
        visualMap: {
            type: 'piecewise',
            pieces: [
                { min: 2000, color: '#6C63FF' },
                { min: 1000, max: 1999, color: '#8A85FF' },
                { min: 500, max: 999, color: '#A8A3FF' },
                { min: 100, max: 499, color: '#C6C4FF' },
                { max: 99, color: '#E4E3FF' }
            ],
            textStyle: {
                color: techColors.secondary,
                textShadow: `0 0 5px ${techColors.glow}`
            },
            left: 20,
            bottom: 20,
            itemHeight: 16,
            itemWidth: 35,
            backgroundColor: 'rgba(15, 23, 54, 0.7)',
            borderColor: techColors.primary,
            borderWidth: 1,
            borderRadius: 4,
            padding: [8, 12]
        },
        graphic: {
            elements: [{
                type: 'grid',
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                shape: {
                    splitNumber: [10, 10],
                    lineStyle: { color: 'rgba(108, 99, 255, 0.1)', width: 1 }
                }
            }]
        },
        series: [
            // 地图底层层
            {
                name: '活动场次',
                type: 'map',
                map: 'china',
                roam: false,
                zoom: 1.1,
                center: [105.5, 35.5],
                label: {
                    show: true,
                    color: techColors.secondary,
                    fontSize: 13,
                    fontWeight: 500,
                    textShadowBlur: 5,
                    textShadowColor: techColors.glow
                },
                data: mapData,
                itemStyle: {
                    normal: {
                        areaColor: ({value}) => {
                            const opacity = Math.min(0.1 + (value || 0) / 5000, 0.3);
                            return `rgba(108, 99, 255, ${opacity})`;
                        },
                        borderColor: techColors.border,
                        borderWidth: 1.5,
                        shadowBlur: 8,
                        shadowColor: techColors.glow
                    },
                    emphasis: {
                        areaColor: 'rgba(108, 99, 255, 0.4)',
                        borderColor: techColors.secondary,
                        borderWidth: 2,
                        shadowBlur: 15,
                        shadowColor: techColors.glow,
                        cursor: 'pointer',
                        transitionDuration: 800
                    }
                },
                z: 1
            },
            // 基础线路层
            {
                name: '传输线路',
                type: 'lines',
                z: 2,
                coordinateSystem: 'geo',
                data: formattedLines,
                lineStyle: {
                    color: ({data}) => {
                        const opacity = 0.2 + (data.weight / 5);
                        return `rgba(108, 99, 255, ${opacity})`;
                    },
                    width: ({data}) => data.weight,
                    curveness: 0.3
                },
                effect: { show: false }
            },
            // 流动线条层
            {
                name: '流动数据',
                type: 'lines',
                z: 3,
                coordinateSystem: 'geo',
                data: formattedLines,
                lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: techColors.primary },
                        { offset: 1, color: techColors.secondary }
                    ]),
                    width: ({data}) => data.weight * 0.8,
                    opacity: 0.7,
                    curveness: 0.3
                },
                effect: {
                    show: true,
                    type: 'arrow',
                    color: techColors.secondary,
                    symbolSize: ({data}) => 6 + data.weight,
                    trailLength: 0.6,
                    period: ({data}) => 3 + (5 - data.weight)
                },
                animationDuration: 1500,
                animationEasing: 'cubicOut'
            },
            // 粒子点缀层
            {
                name: '数据粒子',
                type: 'scatter',
                z: 4,
                coordinateSystem: 'geo',
                symbolSize: ({data}) => 2 + (data.weight / 2),
                data: particleData.map(particle => {
                    const [start, end] = particle.coords;
                    const x = start[0] + (end[0] - start[0]) * particle.percent;
                    const y = start[1] + (end[1] - start[1]) * particle.percent;
                    return {
                        value: [x, y],
                        itemStyle: {
                            color: particle.percent > 0.5 ? techColors.secondary : techColors.primary,
                            opacity: 0.8 + Math.random() * 0.2
                        }
                    };
                }),
                animationDuration: 8000,
                animationEasing: 'linear',
                animationRepeat: true,
                animationUpdate: true
            }
        ]
    };

    // 粒子动画更新
    function updateParticles() {
        if (!window.mapChart) return;
        const option = window.mapChart.getOption();
        option.series[3].data = particleData.map(particle => {
            particle.percent = (particle.percent + 0.005) % 1;
            const [start, end] = particle.coords;
            const x = start[0] + (end[0] - start[0]) * particle.percent;
            const y = start[1] + (end[1] - start[1]) * particle.percent;
            return {
                value: [x, y],
                itemStyle: {
                    color: particle.percent > 0.5 ? techColors.secondary : techColors.primary,
                    opacity: 0.8 + Math.random() * 0.2
                }
            };
        });
        window.mapChart.setOption(option);
        requestAnimationFrame(updateParticles);
    }

    window.mapChart.setOption(option);
    updateParticles();
    window.addEventListener('resize', () => window.mapChart.resize());
}